<template>
	<view>
		<!-- 顶部通栏 -->
		<view class="shopcar-t">
			<view class="shopcar-t-icon">
				<image src="/static/对,正确,打勾.png" mode="widthFix" class="shopcar-t-img"></image>
				<view>30天无忧退货</view>
			</view>
			<view class="shopcar-t-icon">
				<image src="/static/对,正确,打勾 (1).png" mode="widthFix" class="shopcar-t-img"></image>
				<view>48小时快速退费</view>
			</view>
			<view class="shopcar-t-icon">
				<image src="/static//对,正确,打勾 (2).png" mode="widthFix" class="shopcar-t-img"></image>
				<view>满88元免邮费</view>
			</view>
		</view>
		<!-- 购物车 -->
		<view class="cart-container">
			<view class="item" v-for="item in cartList" :key="item.goods_id">
				<!-- $emit指当前数据的 -->
				<u-checkbox :value="item.checked == 1" shape="circle" active-color="#ec9bad" :disabled="!custom"
					@change="clikeckeck($event,item.product_id)">
				</u-checkbox>

				<view class="right">
					<u-swipe-action :options="swipeActionOptions" @content-click="onClickAction($event,item)"
						@click="removeStopList(item)">
						<view class="content">
							<u-image width="176rpx" height="176rpx" :src="item.list_pic_url"></u-image>
							<view class="info">
								<text class="name">{{item.goods_name}}</text>
								<view class="price-count">
									<text class="price">¥{{item.retail_price}}.00</text>
									<text class="count">x{{item.number}}</text>
								</view>

								<!-- 步进器 -->
								<view v-show="!custom">
									<view class="stepper">
										<u-number-box :value="item.number" @change="onClickNumberBox($event,item)">
										</u-number-box>
									</view>
								</view>
							</view>
						</view>
					</u-swipe-action>
				</view>
			</view>
		</view>
		<!-- 支付区域 -->
		<view class="payment">
			<view class="payment-content">
				<u-checkbox :value="checkedGoodsCount == goodsCount" shape="circle" active-color="#ff9900"
					:disabled="!custom" @change="clickcheckAll">
					全选
				</u-checkbox>
				<view class="payment-content-r">
					合计：
					<text style="font-size: 30rpx;">￥</text>
					<text>
						{{checkedGoodsPrice}}.00
					</text>
					<u-button :custom-style="customStyle" shape="circle">立即购买</u-button>
				</view>
			</view>
		</view>
		<!-- 编辑区域 -->
		<view class="edit">
			<view class="edit-content">
				<view>累计共{{goodsCount}}件商品，可点击</view>
				<u-button :custom-style="custom?customStyle2:customStyle3" @click="clickEdit" hover-class="none"
					throttle-time='0'>
					{{custom?'编辑':'完成编辑'}}
				</u-button>
				<view>按钮进行商品数量修改</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		checkToken
	} from "../../util/router.js"
	export default {
		onShow() {
			// 每次进来都要判断有没有登录(token)
			// 如果有token,那么继续预览
			// 没有token,跳转到登录页面,把当前页面路径存起来
			checkToken({
				cbIfHasToken: () => {
					this.$request({
						url: "/cart/index",
						successCb: res => {
							this.getshopCar(res)
						}
					})
				},
				pathForGoingBack: '../shop/shop'
			})




			// if (!uni.getStorageSync('token')) {
			// 	this.cartList = []
			// 	this.checkedGoodsPrice = 0
			// 	this.goodsCount = 0
			// 	uni.showToast({
			// 		title: '请先登录',
			// 		icon: 'loading'
			// 	})
			// 	setTimeout(() => {
			// 		uni.switchTab({
			// 			url: '/pages/myUser/myUser'
			// 		})
			// 	}, 500)
			// } else {

			// 	this.$request({
			// 		url: "/cart/index",
			// 		successCb: res => {
			// 			this.getshopCar(res)
			// 		}
			// 	})
			// }
		},
		data() {
			return {
				hasRenderedNumberBox: false, // 是否已经把步进器渲染完成了，只有当步进器渲染完成了才允许步进器去触发change事件
				// 获取购物车数组
				cartList: [],
				checked: true,
				// 全选按钮
				checkAll: true,
				// 选中商品总数
				checkedGoodsCount: 0,
				// 所有商品总数
				goodsCount: 0,
				// 所有商品总价
				checkedGoodsPrice: 0,
				swipeActionOptions: [{
					text: '删除',
					style: {
						backgroundColor: 'red'
					}
				}],
				// 决定编辑按钮样式
				custom: true,
				// 购买按钮样式
				customStyle: {
					// 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: 'white',
					backgroundImage: 'linear-gradient(-90deg, red, orangered,orange)',
					marginLeft: '30rpx',
					fontSize: '28rpx'
				},
				// 编辑按钮样式
				customStyle2: {
					color: 'white',
					backgroundColor: '#07c160',
					width: "84rpx",
					height: "64rpx",
					fontSize: "24rpx",
					margin: '0rpx 10rpx'
				},
				// 完成编辑按钮样式
				customStyle3: {
					color: 'white',
					backgroundColor: '#ee0a24',
					width: "132rpx",
					height: "64rpx",
					fontSize: "24rpx",
					margin: '0rpx 10rpx'
				}
			}
		},
		methods: {
			clickEdit() {
				this.custom = !this.custom
			},
			// 获取购物车数据
			getshopCar(res) {
				// console.log(res);
				let {
					cartList,
					cartTotal
				} = res
				this.cartList = cartList
				let {
					checkedGoodsAmount,
					checkedGoodsCount,
					goodsCount
				} = cartTotal
				this.goodsCount = goodsCount
				this.checkedGoodsCount = checkedGoodsCount
				this.checkedGoodsPrice = checkedGoodsAmount
			},

			// 复选框
			clikeckeck(e, product_id) {
				console.log(e);
				// console.log(product_id);
				this.$request({
					url: '/cart/checked',
					method: "POST",
					data: {
						isChecked: e.value ? 1 : 0,
						productIds: product_id.toString()
					},
					successCb: res => {
						// console.log(res);
						this.getshopCar(res)
					}
				})
			},
			// 点击内容触发单选
			onClickAction(e, item) {
				if (!this.custom) {
					return
				}
				// console.log(item);
				this.$request({
					url: '/cart/checked',
					method: "POST",
					data: {
						isChecked: item.checked == 1 ? 0 : 1,
						productIds: item.product_id
					},
					successCb: res => {
						// console.log(res);
						this.getshopCar(res)
					}
				})
			},
			// 全选
			clickcheckAll(e) {
				// console.log(e);
				let productIdArr = []
				this.cartList.forEach(el => {
					// console.log(el);
					productIdArr.push(el.product_id)
				})
				// console.log(productIdArr);

				this.$request({
					url: "/cart/checked",
					method: "POST",
					data: {
						isChecked: e.value ? 1 : 0,
						productIds: productIdArr.join(',') // 所有列表项的id组成的字符串
					},
					successCb: res => {
						this.getshopCar(res)
					}
				})
			},
			// 点击步进器
			onClickNumberBox(e, item) {
				if (this.hasRenderedNumberBox) {
					return
				}
				this.hasRenderedNumberBox = true
				// console.log(e);
				// console.log(item);
				let {
					goods_id,
					id,
					product_id
				} = item

				this.$request({
					url: "/cart/update",
					method: "POST",
					data: {
						number: e.value,
						goodsId: goods_id,
						id,
						productId: product_id
					},
					successCb: res => {
						// console.log(res);
						this.getshopCar(res)
						this.hasRenderedNumberBox = false
					}
				})
			},
			// 点击删除
			removeStopList(item) {
				// console.log(item);
				this.$request({
					url: "/cart/delete",
					method: "POST",
					data: {
						productIds: item.product_id.toString()
					},
					successCb: res => {
						console.log(res);
						this.getshopCar()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.shopcar-t {
		height: 60rpx;
		background-color: #efefef;
		display: flex;

		.shopcar-t-icon {
			height: 60rpx;
			width: 33.3%;
			display: flex;
			align-items: center;
			font-size: 26rpx;

			.shopcar-t-img {
				width: 30rpx;
				margin-left: 20rpx;
			}

			view {
				margin-left: 8rpx;
			}
		}
	}

	.cart-container {
		padding: 20rpx 20rpx 0;
		margin-bottom: 200rpx;

		.item {
			display: flex;
			align-items: center;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
			border-bottom: 1px solid #ccc;

			.right {
				flex: 1;
				overflow: hidden;
				padding: 16rpx 0;
				background-color: #fafafa;

				.content {
					display: flex;
					align-items: center;
					background-color: #fafafa;
					padding: 0 32rpx;

					.info {
						flex: 1;

						.name {
							display: inline-block;
							font-size: 36rpx;
							margin-bottom: 40rpx;
						}

						.price-count {
							display: flex;
							justify-content: space-between;
							align-items: baseline;

							.price {
								font-size: 32rpxs;
							}

							.count {
								font-size: 26rpx;
								color: #969799;
							}
						}

						.stepper {
							display: flex;
							justify-content: flex-end;
							margin-top: 20rpx;
						}
					}
				}
			}
		}
	}

	.payment {
		position: fixed;
		bottom: 100rpx;


		.payment-content {
			padding: 20rpx;
			width: 750rpx;
			height: 100rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.payment-content-r {
				display: flex;
				align-items: center;

				text {
					color: #ee0A24;
					font-size: 40rpx;
				}
			}
		}
	}

	.edit {
		position: fixed;
		bottom: 200rpx;
		color: #f56723;

		.edit-content {
			padding: 20rpx;
			background-color: #fff7cc;
			width: 750rpx;
			height: 100rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
		}
	}
</style>
